.swiper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.swiper .swiper-views {
  position: relative;
  height: 0;
  flex: 1;
  overflow: hidden;
}
.swiper .swiper-views .swiper-views-item {
  height: 100%;
  width: 100%;
}

.swiper .swiper-views .swiper-views-item {
  position: absolute;
  z-index: 1;
}
.swiper .swiper-views .swiper-views-item img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0s linear 0.75s;
}
.swiper .swiper-views .swiper-views-item::before {
  z-index: 1;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  display: inline-block;
  width: 0;
  height: 100%;
  transition: width 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.swiper .swiper-views .swiper-views-item.active {
  z-index: 2;
}
.swiper .swiper-views .swiper-views-item.active img {
  z-index: 3;
  width: 100%;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
}

.swiper .swiper-views .swiper-views-item.active::before {
  right: auto;
  width: 100%;
}

.swiper .swiper-views .swiper-views-item img {
  height: 100%;
  width: 100%;
}
/* pager */
.swiper .swiper-pager {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper .swiper-pager .active {
  height: 3px;
  width: 50px;
}

.swiper .swiper-pager span {
  position: relative;
  margin: 0 5px;
  display: inline-block;
  height: 3px;
  width: 5px;
  background-color: #e5e5e5;
}
.swiper .swiper-pager span::before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}
.swiper .swiper-pager .active::before {
  width: 100%;
  transition: width var(--timeout) linear;
}
